<template>
  <div>
    <el-card>
      <div slot="header">账号列表</div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        @selection-change="geiIds"
      >
        <el-table-column type="selection"> </el-table-column>
        <el-table-column prop="account" label="姓名"> </el-table-column>
        <el-table-column prop="userGroup" label="用户组"> </el-table-column>
        <el-table-column label="创建日期">
          <template slot-scope="scope">{{ scope.row.ctime | YMD }}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑
            </el-button>
            <el-popconfirm
              title="这是一段内容确定删除吗？"
              @confirm="handleDelete(scope.row)"
            >
              <el-button size="mini" type="danger" slot="reference"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="el-pagination"
        :page-sizes="[3, 5]"
        :page-size="pageSize"
        :current-page="currentPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="sizeChange"
      >
      </el-pagination>
      <div class="mt20">
        <el-button type="danger" @click="someDelete">批量删除</el-button>
        <el-button type="primary" @click="$refs.multipleTable.clearSelection()"
          >取消选择</el-button
        >
      </div>
    </el-card>
    <el-dialog title="更改账号" :visible.sync="dialogFormVisible">
      <el-form class="form" :model="form" label-width="100px">
        <el-form-item label="用户">
          <el-input v-model="form.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户组">
          <el-select v-model="form.userGroup" placeholder="请选择用户权限">
            <el-option label="超级管理员" value="超级管理员"></el-option>
            <el-option label="普通用户" value="普通用户"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 解构axios请求函数
import {
  api_users_list,
  api_users_del,
  api_users_editt,
  api_users_batchdel,
} from "@/api/user";
export default {
  data() {
    return {
      tableData: [
        {
          account: "王小虎",
          userGroup: "超级管理员",
          ctime: "2016-05-03",
        },
      ],
      ids: [],
      currentPage: 1,
      pageSize: 3,
      total: 1,
      dialogFormVisible: false,
      form: {
        id: "",
        account: "",
        userGroup: "",
      },
    };
  },
  methods: {
    // 获取账号列表
    async getList() {
      // 发请求参数
      let currentPage = this.currentPage;
      let pageSize = this.pageSize;
      // 发请求
      let res = await api_users_list({
        currentPage,
        pageSize,
      });
      // 解构数据
      let { data, total } = res.data;
      //数据赋值渲染界面
      this.total = total;
      this.tableData = data;
      // 当数据为空，且不是第一页的时候，返回上一页
      if (data.length === 0 && this.currentPage !== 1) {
        this.currentPage--;
        this.getList();
      }
    },
    // 编辑
    handleEdit(row) {
      // 展开弹窗，回填数据
      this.dialogFormVisible = true;

      this.form = { ...row };
    },
    // 点击编辑中的确定按钮 发请求成功，关闭弹窗,重新发起请求获取数据渲染界面
    async handleConfirm() {
      // 发请求
      let res = await api_users_editt(this.form);
      let { code, msg } = res.data;
      if (code === 0) {
        this.dialogFormVisible = false;
        // 发请求，拉取数据
        this.getList();
      }
    },
    // 删除账号
    async handleDelete(row) {
      // 获取id
      let { id } = row;
      // 发请求
      let res = await api_users_del({ id });

      let { code, msg } = res.data;
      if (code === 0) {
        this.getList();
      }
    },
    // 点击获取ids
    geiIds(val) {
      this.ids = val.map((v) => v.id);
    },
    // 点击批量删除,弹出信息
    someDelete() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          if (this.ids.length) {
            let res = await api_users_batchdel({ ids: this.ids });
            let { code, msg } = res.data;
            if (code === 0) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getList();
            }
          } else {
            this.$message.info("请选中你要删除的用户");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //点击确定删除发送请求

    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    sizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
  },
  created() {
    // 初始化发请求获取账户列表
    this.getList();
  },
};
</script>

<style lang="scss" scoped>
.el-pagination {
  margin-top: 20px;
}
.form {
  width: 300px;
}
</style>